<template>
<div>
  <el-row :gutter="24">
    <el-col :span="5" :xs="24">
      <div class="head-container">
        <el-tree
          :data="deptOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick"
        />
      </div>
    </el-col>
    <el-col :span="19">

      <el-row>
        <el-col :span="1.5">
          <el-button type="primary" :disabled="!userIds.length" @click="openElectric()">确认</el-button>
        </el-col>
      </el-row>
            <el-table :row-style="{ height: '30px' }"  :cell-style="{ padding: '0px' }" v-loading="loading" :data="userList" @selection-change="handleSelectionChange" @select="handleSelect" ref="userTable">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="用户编号" align="center" key="userId" prop="userId"  />
        <el-table-column label="用户名称" align="center" key="userName" prop="userName"  :show-overflow-tooltip="true" />
        <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName"  :show-overflow-tooltip="true" />
        <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName"  :show-overflow-tooltip="true" />
        <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber"  width="120" />
        <el-table-column label="创建时间" align="center" prop="createTime" width="160">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-col>
  </el-row>
      </div>
</template>
<script >
import { listSeas, getSeas, delSeas, convertElectric,treeEle } from "@/api/highSeas/seas";
import { listUser, getUser, listByOrgId, addUser, updateUser, resetUserPwd, changeUserStatus,deptTreeSelect ,userTree} from "@/api/system/user";
import dia from "./dialog.vue";
export  default {
  name:"Open",
  components: {dia},
  dicts: ['enterprise_nature','product_type',  'administrative_area','customer_industry','seas_status'],
  props: {
    ids: {
      type: Array,
      default: []
    },
  },
  data(){
    return{
      // 部门树选项
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        userName: undefined,
        phonenumber: undefined,
        deptId: undefined
      },
      userList:[],
      // 显示搜索条件
      showSearch: true,
      // 公海管理表格数据
      seasList: [],
      // 遮罩层
      loading: true,
      userIds:[],
      // 非单个禁用
      single: true,
      total:0,
      //部门id
      deptId:null,
      userId:null
    }
  },
  created() {
    this.getList();
    this.getDeptTree();
  },
  methods:{
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    getDeptTree() {
      treeEle().then(response => {
        this.deptOptions = response.data;
        console.log(this.deptOptions)
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询人员列表 */
    getList() {
      this.loading = true;
      listByOrgId(this.queryParams).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    handleSelectionChange(selection) {
      if (selection.length === this.userList.length) {
        // 触发全选时，清空 userIds，禁用确认按钮
        this.userIds = [];
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    openElectric(){
      if (this.userIds.length===0){
        this.$message.error("请选择转电销的人员");
      }else {
        console.log(this.userIds)
        if(this.userIds.length>1){
          this.$message.error("只能选择一个电销人员转入！！！");
        }else {
          convertElectric(this.ids, this.userIds).then(response => {
            if (response.code === 200) {
              this.$message.success("操作成功");
              //清空数据
              this.userIds=null;
              this.$emit('change',false);
            } else {
              this.$message.error("操作失败");
            }
          });
        }
      }
//         if (this.userId === null) {
//   this.$message.error("请选择转电销的客户");
// } else if (Array.isArray(this.ids) && this.ids.length === 0) {
//   this.$message.error("请选择转电销的数据");
// } else if (this.userId !== null && this.ids !== null) {
//   console.log('id' + this.ids)
//   convertElectric(this.ids, this.userId).then(response => {
//     if (response.code === 200) {
//       this.$message.success("操作成功");
//       //清空数据
//       this.deptId=null;
//       this.userId=null;
//       this.$emit('change',false);
//     } else {
//       this.$message.error("操作失败");
//     }
//   });
// }
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId=data.id;
      this.getList();
      // console.log(data)
      // if (data.id!==null && data.id!==undefined){
      //   this.deptId = data.id;
      //   this.userId=null;
      //   console.log(this.deptId)
      //   userTree(this.deptId).then(response=>{
      //     if (response.data!==null){
      //       console.log(response.data.children)
      //        if (!data.children) {
      //         console.log("这里执行了吗")
      //          response.data.forEach(item => {
      //            const user={
      //             userId: item.userId,
      //             label: item.nickName
      //           };
      //         });
      //
      //        }
      //     }
      //   })
      // }
      // if (data.userId != null){
      //   this.deptId=null;//制空，怕出现bug
      //   this.userId=data.userId;
      //   console.log(this.userId)
      // }
    },
    // // 添加 handleSelect 方法
    // handleSelect(selection, row) {
    //   this.$refs.userTable.clearSelection()
    //   if (selection.length > 0) {
    //     this.$refs.userTable.toggleRowSelection(row, true)
    //     this.userIds = [row.userId]
    //   } else {
    //     this.userIds = []
    //   }
    // },
    handleSelect(selection, row) {
      if (selection.length > 1) {
        // 避免多选，保留最后一次选择的
        this.$refs.userTable.clearSelection();
        this.$refs.userTable.toggleRowSelection(row, true);
        this.userIds = [row.userId];
      } else {
        this.userIds = selection.length ? [row.userId] : [];
      }
    },
  }




}
</script>
<style scoped lang="scss">

</style>
